<template>
	<v-collapse :items="collapseItems" :accordion="true" :activeIndex="activeIndex" @change="handleCollapseChange">
		<template #content="{ item }">
			<view class="custom-content">
				<text>{{ item.content }}</text>
				<text v-if="item.additional" class="additional">{{ item.additional }}</text>
			</view>
		</template>
	</v-collapse>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeIndex = ref(0);

const collapseItems = ref([
	{
		title: '面板标题 1',
		content: '这里是面板1的内容...',
		additional: '额外信息',
		expanded: true
	},
	{
		title: '面板标题 2',
		content: '这里是面板2的内容...',
		expanded: false
	}
]);

const handleCollapseChange = (index: number) => {
	console.log('当前激活的面板索引:', index);
};
</script>

<style scoped>
.custom-content {
	padding: 16px;
	border-radius: 8px;
}

.additional {
	display: block;
	margin-top: 10px;
	color: #3498db;
	font-weight: 500;
}
</style>
